<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Realtime communication with WebRTC</title>
  </head>

  <body>
    <h1>Realtime communication with WebRTC</h1>
    <button id="startBtn">Start</button>
    <br />
    <video autoplay playsinline></video>
  </body>
  <script>
    //判断浏览器是否支持这些 API
    if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
      console.log("enumerateDevices() not supported.");
    } else {
      // 枚举 cameras and microphones.
      navigator.mediaDevices
        .enumerateDevices()
        .then((devices) => {
          //打印出每一个设备的信息
          devices.forEach((device) => {
            console.log(
              `${device.kind}: ${device.label} id = ${device.deviceId}`
            );
          });
        })
        .catch((err) => {
          console.log(`${err.name}: ${err.message}`);
        });
    }
  </script>
</html>
